<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="wrap">
        <div class="swiper-container my-swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide active">
                    <img src="./images/bg1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/bg2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/bg3.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/bg4.jpg" alt="">
                </div>
            </div>
            <div class="pagination">
                <!-- <ul>
                    <li class="active"></li>
                </ul> -->
            </div>
            <div class="login">
                <input type="text" class="phone" placeholder="请输入手机号">
                <input type="text" class="code" placeholder="请输入去验证码">
                <button class="getCode">获取验证码</button>
                <button class="submit">提交</button>
            </div>
        </div>
    </div>
    <script src="./js/data.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="./js/getCode.js"></script>
    <script>
        var swiperWrapper = document.querySelector(".swiper-wrapper")
        function render(data) {
            swiperWrapper.innerHTML = data.map(function (item) {
                return `
                <div class="swiper-slide">
                    <img src="./images/${item}" alt="">
                </div>
                `
            }).join("")
        }
        render(data)

        // 开启轮播图
        new Swiper(".my-swiper", {
            autoplay: 3000,
        })
        // 开启获取验证码功能
        var obj = new GetCode({
            time: 5000,
            size: 4,
        })
        // 手机号正则
        var regPhone = /1[3-9]\d{9}/
        var phone = document.querySelector(".phone")
        var code = document.querySelector(".code")
        document.querySelector(".submit").onclick = function () {
            var flag = regPhone.test(phone.value) && code.value === obj.code
            //    console.log(flag)
            if (flag) {
                alert("登录成功")
            }else{
                alert("账户密码对")
            }
        }

    </script>
</body>

</html>